﻿(function(){
	
	var ckeditor_youtube_timer;

	function ckeditor_youtube_parse_url_id(url){
		if(!url || url.length<1){
			return false;
		}								
		
		var regExp = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;
	    var match = url.match(regExp);
	    if (!match || match[1].length!=11){
	    	return false;
	    }	
	    
	    return match[1];
	}

	function ckeditor_youtube_build_player(id){
		return '<object ytid="'+id+'" style="width:420px; height: 315px;" id="ckeditor_youtube_player" width="420" height="315"><param name="movie" value="http://www.youtube.com/v/'+id+'?hl=es_ES&version=3&modestbranding=1&theme=light&color=white&autohide=1&rel=0&color1=0xCCCCCC&color2=0x3B5998&border=0&fs=1&autoplay=0&loop=0&disablekb=0&egm=0&start=0&hd=0&showsearch=1&showinfo=1&iv_load_policy=0"></param><param name="allowFullScreen" value="true"></param><embed style="width:420px; height: 315px;" width="420" height="315" src="http://www.youtube.com/v/'+id+'?hl=es_ES&version=3&modestbranding=1&theme=light&color=white&autohide=1&rel=0&color1=0xCCCCCC&color2=0x3B5998&border=0&fs=1&autoplay=0&loop=0&disablekb=0&egm=0&start=0&hd=0&showsearch=1&showinfo=1&iv_load_policy=0" type="application/x-shockwave-flash" width="420" height="315" wmode="transparent" allowfullscreen="true"></embed></object>';
	}

	function ckeditor_youtube_build_image(){
		return '<img style="margin: 30px 0 0 0;" src="'
			+CKEDITOR.getUrl(CKEDITOR.plugins.getPath('youtube')
			+'images/youtube_large.png')
			+'">';	
	}

	function ckeditor_toutube_preview_url(element){
		url= element.getDialog().getContentElement('general', 'url').getValue();								
		newid= ckeditor_youtube_parse_url_id(url);
		if(newid){
			curid= element.getDialog().getContentElement('general', 'vid').getValue();
			if(curid!=newid){
				element.getDialog().getContentElement('general', 'vid').setValue(newid);		
				ckeditor_toutube_preview(element);
			}
		}		
	}

	function ckeditor_toutube_preview(element){
		clearTimeout(ckeditor_youtube_timer);
		ckeditor_youtube_timer= setTimeout(function(){								
			id= element.getDialog().getContentElement('general', 'vid').getValue();
			if(id.length==11){
				html= ckeditor_youtube_build_player(id);									
				element.getDialog().getContentElement('general', 'youtubepreview').getElement().setHtml(html);
			}else{
				html= ckeditor_youtube_build_image();
				element.getDialog().getContentElement('general', 'youtubepreview').getElement().setHtml(html);
			}		
		}, 800);	
	}	
	
	
	CKEDITOR.dialog.add(
		'youtube',
		function(editor){
			return{
				title: editor.lang.youtube.title,
				minWidth: CKEDITOR.env.ie&&CKEDITOR.env.quirks?368:350,
				minHeight: 415,
				onShow: function(){
					this.getContentElement('general','url').getInputElement().setValue('');
					this.getContentElement('general','vid').getInputElement().setValue('');
					html= ckeditor_youtube_build_image();
					this.getContentElement('general', 'youtubepreview').getElement().setHtml(html);
				},
				onOk:function(){
					vid= this.getContentElement('general','vid').getInputElement().getValue();				
					vwidth = this.getContentElement('general','vwidth').getInputElement().getValue();
					vheight = this.getContentElement('general','vheight').getInputElement().getValue();
					
					newurl= 'http://localhost/blog_php/public_html/static/youtube/?v='+vid+'&w='+vwidth+'&h='+vheight; 
					
					var text='<iframe title="YouTube" class="youtube-player" type="text/html" id="'+vid+'" width="'+vwidth+'" height="'+vheight+'" src="' 
					+ newurl
					+'" frameborder="0" framespacing="0" scrolling="no"></iframe>'; 					
					
					this.getParentEditor().insertHtml(text);
				},
				resizable: CKEDITOR.DIALOG_RESIZE_NONE,
				contents: [{
					label: editor.lang.common.generalTab,
					id:'general',
					elements:[
						{
							type : 'text',
							label : editor.lang.youtube.pasteMsg+':',
							labelStyle : 'font-weight: bold',
							inputStyle : 'width: 100%;',
							id : 'url',
							onKeyUp: function(){ckeditor_toutube_preview_url(this);},
							onChange: function(){ckeditor_toutube_preview_url(this);},
							setup : function( element )
							{
								this.setValue( element.getText() );
							}
						},
						{
		                    type : 'hbox',
		                    widths : [ '120px', '120px', '360px' ],
		                    children :
		                    [{
								type : 'text',
								label : editor.lang.youtube.idinput,
								style : 'width: 80px;',
								inputStyle : 'text-align:center;',
								id : 'vid',								
								maxLength : 11,
								'default' : '',
								validate : function(){ 
	                    			if(this.getValue().length==0){
	                    				alert(editor.lang.youtube.idval1);
	                    				return false;
	                    			}
	                    				
	                    			if(this.getValue().length!=11){
										alert(editor.lang.youtube.idval2);
										return false;
									}
																		
									return true;									
		                    	},
								onKeyUp: function(){ckeditor_toutube_preview(this);},
								onChange: function(){ckeditor_toutube_preview(this);},
								setup : function( element )
								{
									this.setValue( element.getText() );
								}          	
		                    },{
								type : 'text',
								label : editor.lang.youtube.widthinput,
								style : 'width: 80px;',
								id : 'vwidth',
								'default' : '420', 
								validate : CKEDITOR.dialog.validate.integer(editor.lang.youtube.widthNAN),
								onKeyUp: function(){},
								onChange: function(){},
								setup : function( element )
								{
									this.setValue( element.getText() );
								}
		                    },{
								type : 'text',
								label : editor.lang.youtube.heightinput,
								style : 'width: 80px;',
								id : 'vheight',
								'default' : '315',
								validate : CKEDITOR.dialog.validate.integer(editor.lang.youtube.heightNAN),
								onKeyUp: function(){},
								onChange: function(){},
								setup : function( element )
								{
									this.setValue( element.getText() );
								}
		                    }]
						},{							
							type : 'html',
							id : 'youtubepreview',
							html: '<div style="margin: 0 auto; width: 420px; height: 315px; border: 1px solid #A0A0A0; text-align:center; white-space:normal;">'+ckeditor_youtube_build_image()+'</div>'
						}						
					]
				}]
			}
		}
	)
})();